<template>
  <el-card class="news-card__container" shadow="never" :body-style="{ padding: 0 }">
    <news-header :sourceLogo="sourceLogo" :sourceType="sourceType" />
    <div v-if="loading" class="news-card__loading">
      <el-skeleton :rows="3" animated />
    </div>

    <div v-else class="news-card__content">
      <template v-if="datas.length > 0">
        <news-item v-for="(ht, index) in datas" :key="ht.id" :item="ht" :isLast="index === list.length - 1" />
      </template>
      <div v-else class="news-card__empty">
        <el-empty description="暂无数据" />
      </div>
    </div>

    <div class="news-card__actions">
      <el-button size="medium" class="transparent-btn" @click.stop="handleTimeClick">
        {{ timeText }}
      </el-button>
      <el-button class="transparent-btn" size="medium" icon="el-icon-more" title="更多" @click.stop="handleMoreClick" />
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'NewsCard',
  components: {
    newsHeader: () => import('./Header.vue'),
    newsItem: () => import('./Item.vue')
  },
  props: {
    sourceLogo: String,
    sourceType: String,
    list: Array,
    intervalTime: Number
  },
  data() {
    return {
      datas: [],
      loading: false
    }
  },
  computed: {
    timeText() {
      return this.secondsToHoursMinutes(this.intervalTime)
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.datas = newVal
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    secondsToHoursMinutes(seconds) {
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)

      if (hours > 0) {
        return `${hours}小时前`
      }
      if (minutes > 0) {
        return `${minutes}分钟前`
      }
      return '1分钟前'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.news-card__container {
  height: 100%;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background-color: #fff;
  cursor: pointer;
  overflow: hidden;

  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }

  &:active {
    transform: scale(0.98);
  }

  @media (max-width: 768px) {
    border-radius: 8px;
  }
}

.news-card__loading {
  padding: 16px;
}

.news-card__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.news-card__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 200px;
  margin: 4px;
  background-color: #fff;
  border-radius: 8px;

  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    transition: background 0.2s ease;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.news-card__actions {
  @include flex-between;
  border-top: 1px solid #f0f2f5;
  transition: all 0.2s ease;
  gap: 8px;

  @media (max-width: 768px) {
    padding: 8px 12px;
    min-height: 40px;
    gap: 4px;
  }
}

.transparent-btn {
  background-color: transparent;
  border: 0;
  color: #606266;
  transition: all 0.2s ease;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &:hover {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.1);
    box-shadow: 0 1px 2px rgba(64, 158, 255, 0.1);
  }

  &:active {
    transform: scale(0.96);
  }

  .el-icon-more {
    font-size: 16px;
    transition: transform 0.2s ease;
  }

  &:hover .el-icon-more {
    transform: rotate(90deg);
  }
}
</style>
